<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Expressions</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.dataValue = "100.23";
        })
        .directive("evalExpression", function ($parse) {
            var expressionFn = $parse("total | currency");
            return {
                scope: {
                    amount: "=amount",
                    tax: "=tax"
                },
                link: function (scope, element, attrs) {
                    scope.$watch("amount", function (newValue) {
                        var localData = {
                            total: Number(newValue) 
                               + (Number(newValue) * (Number(scope.tax) /100))
                        }
                        element.text(expressionFn(scope, localData));
                    });
                }
            }            
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="dataValue" /></p>
        <div>
            Result: <span eval-expression amount="dataValue" tax="10"></span>
        </div>
    </div>
</body>
</html>
